<template>
	<div class="Register">
		<div class="header">
			<div class="container">
				<span @click="goBack()">
					<img src="~img/shopcar/return.png" />
				</span>
				<router-link to="/Register">
					<p>注册</p>
				</router-link>
				<router-link to="/Login">
					<p>登录</p>
				</router-link>
			</div>
		</div>
		<div class="content">
			<div class="tip">
				<i v-if="show1">您输入的手机号码不符合要求</i>
				<i v-if="show2">手机号码不能为空</i>
				<i v-if="show3">密码由8-15个大小由英文字母、符号或数字组成</i>
				<i v-if="show4">您输入的密码不符合要求</i>
				<i v-if="show5">密码不能为空</i>
			</div>
			<form>	
				<label for="phone" id="label_1">
					<span>手机号：</span>
					<input type="text" id="phone" @focus="focusPhone" @blur="blurPhone"/>
				</label>
				<label for="password" id="label_2">
					<span>密码：</span>
					<input type="password" id="password" @focus="focusPsd" @blur="blurPsd"/>
				</label>
				<label for="code" id="label_3">
					<span>验证码：</span>
					<input type="text" id="code"/>
					<em>点击获取</em>
				</label>
				<button @click="next()">下一步</button>
				<p>
					<input type="checkbox" id="check"/>
					<span>我已阅读并同意使用条款和隐私政策</span>
				</p>
			</form>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Register",
		
		data(){
			return{
				show1:false,
				show2:false,
				show3:false,
				show4:false,
				show5:false
			}
		},
		methods:{
			goBack(){
				this.$router.go(-1)
			},
			focusPhone(){
				var psd_val = document.getElementById("password").value;
				if(psd_val==""){
					this.show5 = false
				}
			},
			blurPhone(){
				var tel_reg = /^1[3-9]\d{9}$/;
				var tel_val = document.getElementById("phone").value;
				if(!tel_reg.test(tel_val)){
					this.show1 = true;
					this.show2 = false;
					this.show3 = false;
					this.show4 = false;
					this.show5 = false;
				}
				if(tel_val == ""){
					this.show1 = false;
					this.show2 = true;
					this.show3 = false;
					this.show4 = false;
					this.show5 = false;
				}
			},
			focusPsd(){				
				var tel_val = document.getElementById("phone").value;
				if(tel_val == ""){
					this.show3 = false;
				}else{
					this.show3 = true;
				}			
			},
			blurPsd(){
				var pwd_reg = /^[a-z0-9_-]{8,15}$/;
				var psd_val = document.getElementById("password").value;
				if(!pwd_reg.test(psd_val)){
					this.show1 = false;
					this.show2 = false;
					this.show3 = false;
					this.show4 = true;
					this.show5 = false;
				}
				if(psd_val == ""){
					this.show1 = false;
					this.show2 = false;
					this.show3 = false;
					this.show4 = false;
					this.show5 = true;
				}
			},
			next(){
				var check = document.getElementById("check");
				if(check.checked){
					var tel_val = document.getElementById("phone").value;
					var psd_val = document.getElementById("password").value;
					var userInfo = {
						tel:tel_val,
						psw:psd_val
					}
					localStorage.setItem("userInfo",JSON.stringify(userInfo));
					this.$router.push({
						path:'/Login'
					})
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.Register
		position relative
		.header
			width 100%
			height 95px
			background #ff9900
			.container
				height inherit
				display flex
				justify-content space-between
				align-items center
				box-sizing border-box
				padding 0 35px
				img
					width 22px
					height 41px
				p
					font-size 37.49px
					color #fff
		.content
			.tip
				i
					display flex
					align-items center
					justify-content center
					width 400px
					height 80px
					font-size 32px
					background #ff9900
					color #fff
					padding 0 10px
					border-radius 40px
					text-align center
					position absolute
					top 170px
					left 180px
			form
				width 600px
				margin 0 auto					
				margin-top 167px
				label
					display block
					width 600px
					height 140px
					line-height 140px
					border-bottom 1px solid #707070					
					span
						font-size 32px
						color #333
					input
						width 465px
						line-height 48px
						font-size 32px
						margin-top -15px
					#code
						width 310px
					em
						color #ff9900
						font-size 32px
				button
					width 600px
					height 100px
					line-height 100px
					color #fff
					font-size 32px
					text-aline center
					background #ff9900
					margin-top 50px
					border-radius 20px
				p
					margin-top 50px
					color #666
					font-size 28px
</style>